<template>
  <div class="">
    <template>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane
          label="维修结算"
          name="first"
          disabled="ture"
        ></el-tab-pane>
        <el-tab-pane label="待支付" name="second">
          <el-row :gutter="10">
            <el-col :span="5"
              ><el-input placeholder="请输入订单号" v-model="ddhone">
                <template slot="prepend">订单号</template>
              </el-input></el-col
            >
            <el-col :span="5"
              ><el-input placeholder="请输入客户" v-model="khone">
                <template slot="prepend">客户</template>
              </el-input></el-col
            >
            <el-col :span="1">
              <el-button type="success" @click="cx()">搜索</el-button>
            </el-col>
          </el-row>
          <br />
          <template>
            <el-table :data="page.list" style="width: 100%" border>
              <el-table-column prop="date" label="单据序号" width="150">
                <template slot-scope="temp">
                  {{ temp.$index + 1 }}
                </template>
              </el-table-column>
              <el-table-column prop="serviceType" label="单据类型" width="180">
              </el-table-column>
              <el-table-column
                prop="servicestatename"
                label="单据状态"
                width="180"
              >
              </el-table-column>
              <el-table-column prop="username" label="客户名称">
              </el-table-column>
              <el-table-column prop="ulicense" label="车牌号">
              </el-table-column>
              <el-table-column prop="userphone" label="手机号">
              </el-table-column>
              <el-table-column prop="repairbilldate" label="开单时间">
              </el-table-column>
              <el-table-column prop="repairbilldated" label="预计完工">
              </el-table-column>
              <el-table-column prop="receptionnote" label="接待备注">
              </el-table-column>
              <el-table-column prop="repairbillno" label="操作">
                <template slot-scope="scope">
                  <el-button
                    type="primary"
                    icon="el-icon-edit"
                    circle
                    @click="ckdd(scope.row.repairbillno)"
                  ></el-button>
                </template>
              </el-table-column>
            </el-table>
          </template>
          <el-row type="flex" class="row-bg" justify="space-around">
            <el-col :span="6">
              <el-pagination
                layout="prev, pager, next"
                :background="true"
                @current-change="handleCurrentChange"
                :current-page="page.pageNum"
                :page-size="page.pageSize"
                :total="page.total"
              >
              </el-pagination>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="已支付" name="third">
          <el-row :gutter="10">
            <el-col :span="5"
              ><el-input placeholder="请输入订单号" v-model="ddhone">
                <template slot="prepend">订单号</template>
              </el-input></el-col
            >
            <el-col :span="5"
              ><el-input placeholder="请输入客户" v-model="khone">
                <template slot="prepend">客户</template>
              </el-input></el-col
            >
            <el-col :span="1">
              <el-button type="success" @click="cx()">搜索</el-button>
            </el-col>
          </el-row>
          <br />
          <template>
            <el-table :data="page.list" style="width: 100%" border>
              <el-table-column prop="date" label="单据序号" width="150">
                <template slot-scope="temp">
                  {{ temp.$index + 1 }}
                </template>
              </el-table-column>
              <el-table-column prop="serviceType" label="单据类型" width="180">
              </el-table-column>
              <el-table-column
                prop="servicestatename"
                label="单据状态"
                width="180"
              >
              </el-table-column>
              <el-table-column prop="username" label="客户名称">
              </el-table-column>
              <el-table-column prop="ulicense" label="车牌号">
              </el-table-column>
              <el-table-column prop="userphone" label="手机号">
              </el-table-column>
              <el-table-column prop="repairbilldate" label="开单时间">
              </el-table-column>
              <el-table-column prop="repairbilldated" label="预计完工">
              </el-table-column>
              <el-table-column prop="receptionnote" label="接待备注">
              </el-table-column>
              <el-table-column prop="repairbillno" label="操作">
                <template slot-scope="scope">
                  <el-button
                    type="primary"
                    icon="el-icon-view"
                    circle
                    @click="ckdd(scope.row.repairbillno)"
                  ></el-button>
                </template>
              </el-table-column>
            </el-table>
          </template>
          <el-row type="flex" class="row-bg" justify="space-around">
            <el-col :span="6">
              <el-pagination
                layout="prev, pager, next"
                :background="true"
                @current-change="handleCurrentChange"
                :current-page="page.pageNum"
                :page-size="page.pageSize"
                :total="page.total"
              >
              </el-pagination>
            </el-col>
          </el-row>
        </el-tab-pane>
      </el-tabs>
    </template>
  </div>
</template>
</div>
</template>

<script>
export default {
  data() {
    //这里存放数据
    return {
      activeName: "second",
      page: {},
      ddhone: "",
      khone: "",
      sid: "4",
      size: "10",
      num: "1",
    };
  },
  //计算属性
  computed: {},
  //方法集合
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
      console.log(tab.index);
      if (tab.index == 1) {
        this.sid = 4;
      } else {
        this.sid = 5;
      }
      this.cx();
    },
    handleCurrentChange(val) {
      this.num = val;
      this.size = this.page.pageSize;
      this.cx();
    },
    cx() {
      let th = this;
      this.$http
        .get("http://localhost:8080/c/rstuvu/rst", {
          params: {
            sid: th.sid,
            rln: th.ddhone,
            uname: th.khone,
            size: th.size,
            num: th.num,
          },
        })
        .then((resp) => {
          th.page = resp.data;
          // console.log(th.page)
        });
    },
    ckdd(sco) {
      console.log(sco);
      this.$router.push(`/index/ljsxq/${sco}`);
    },
  },
  //挂载完成（可以访问DOM元素）
  mounted() {
    this.cx();
  },
  //监控data中的数据变化
  watch: {},
};
</script>
<style  scoped>
/*@import url(); 引入公共css类*/
</style>